<template>
  <div class="my-clubs-view">
    <h2>我的社团</h2>
    <div class="my-clubs-content">
      <div class="club-tabs">
        <button class="tab-btn" :class="{ 'active': activeTab === 'joined' }" @click="activeTab = 'joined'">已加入社团</button>
        <button class="tab-btn" :class="{ 'active': activeTab === 'managed' }" @click="activeTab = 'managed'">管理的社团</button>
      </div>
      <div class="club-list">
        <div class="club-item" v-for="club in activeClubs" :key="club.id">
          <div class="club-header">
            <h3>{{ club.name }}</h3>
            <span class="club-role">{{ club.role }}</span>
          </div>
          <div class="club-details">
            <p class="club-description">{{ club.description }}</p>
            <div class="club-stats">
              <span>成员: {{ club.memberCount }}</span>
              <span>活动: {{ club.activityCount }}</span>
            </div>
          </div>
          <div class="club-actions">
            <button class="view-btn">查看详情</button>
            <button class="manage-btn" v-if="club.role === '管理员'">管理社团</button>
            <button class="leave-btn">退出社团</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const activeTab = ref('joined')

// 模拟我的社团数据
const myClubs = ref([
  { id: 1, name: '编程社团', role: '成员', description: '学习各种编程语言和技术', memberCount: 120, activityCount: 20, tab: 'joined' },
  { id: 2, name: '数学建模社团', role: '管理员', description: '参加数学建模竞赛，提升建模能力', memberCount: 60, activityCount: 15, tab: 'managed' },
  { id: 3, name: '音乐社团', role: '成员', description: '喜欢音乐的同学聚集在一起', memberCount: 70, activityCount: 10, tab: 'joined' },
])

const activeClubs = computed(() => {
  return myClubs.value.filter(club => club.tab === activeTab.value)
})
</script>

<style scoped>
.my-clubs-view {
  width: 100%;
  height: 100%;
}

.my-clubs-content {
  padding: 24px;
}

.club-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.tab-btn {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab-btn.active {
  background-color: #1890ff;
  color: white;
}

.tab-btn:hover:not(.active) {
  background-color: #e6f7ff;
}

.club-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.club-item {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.club-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.club-header h3 {
  color: #333;
  margin: 0;
}

.club-role {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background-color: #52c41a;
}

.club-role[style*="管理员"] {
  background-color: #faad14;
}

.club-description {
  margin-bottom: 12px;
  color: #666;
  line-height: 1.4;
}

.club-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  color: #999;
  font-size: 14px;
}

.club-actions {
  display: flex;
  gap: 12px;
}

.view-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.view-btn:hover {
  background-color: #40a9ff;
}

.manage-btn {
  padding: 8px 16px;
  background-color: #faad14;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.manage-btn:hover {
  background-color: #ffc53d;
}

.leave-btn {
  padding: 8px 16px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.leave-btn:hover {
  background-color: #ff7875;
}

@media (max-width: 768px) {
  .club-actions {
    flex-direction: column;
  }
  
  .club-actions button {
    width: 100%;
  }
}
</style>